<!--
 * @Author: houmin 745762351@qq.com
 * @Date: 2023-09-11 09:50:52
 * @LastEditors: houmin 745762351@qq.com
 * @LastEditTime: 2023-12-04 21:35:41
 * @FilePath: \tch-h5\src\views\hotel-detail\HotelDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Header title="产品详细" :back="true" />
  <div class="panda-details">
    <div class="card">
      <img
        src="../../assets/images/oneCard/gold-card.png"
        height="200"
        alt=""
        style="width: 100%"
      />
      <p class="fz12 mt10">
        <span class="fz22 text-orange blod">¥{{ cardInfo?.nowPrice }}</span
        >起
      </p>
      <p>
        <span class="blod fz18">{{ cardInfo?.cardName }}</span>
        <span class="total fr fz12 text-gray"
          >月售{{ cardInfo?.monthlySalesCount }}份</span
        >
      </p>
    </div>
    <div class="card">
      <!-- <p class="title">特别说明</p> -->
      <div class="html-box" v-html="cardInfo?.cardDesc"></div>
      <!-- {{cardInfo?.cardDesc}} -->
      <!-- <p class="fz12 mt10 desc">
        {{ cardInfo?.cardDesc }}
      </p> -->
    </div>
    <!-- <div class="card">
      <p class="title">产品说明</p>
      <p class="fz12 mt10 desc">
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
      </p>
    </div> -->
  </div>
  <van-action-bar>
    <span class="bar-num">¥{{ cardInfo?.nowPrice }}</span>
    <span class="bar-old-num">¥{{ cardInfo?.originalPrice }}</span>
    <van-action-bar-button type="danger" text="立即购买" @click="pay" />
  </van-action-bar>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Header from "@/components/header/Header.vue";
import api from "@/api/index.js";
import { useRoute } from "vue-router";
import { goPayUrl } from "@/utils/pay.js";
const route = useRoute();

const cardInfo = ref({});
const getCardInfo = (val) => {
  api.getCardInfoApi({ cardId: val }).then((res) => {
    cardInfo.value = res.data;
    //  console.log(cardInfo.value )
  });
};

onMounted(() => {
  // console.log(route.query.cardId)
  getCardInfo(route.query.cardId);
});

const pay = async () => {
  let { code, data } = await api.getPayUrl({
    cardId: cardInfo.value.id,
    finishUrl:
      window.location.protocol +
      "//" +
      window.location.host +
      "/#/order?title=panda",
  });
  if (code == 200) goPayUrl({ payId: data.payId }); // window.location.href = data.payUrl;
};
</script>

<style lang="scss" scoped>
.panda-details {
  width: 100%;
  height: calc(100vh - 100px);
  background: url("../../assets/images/oneCard/bg.png") no-repeat;
  background-size: contain;
  padding-top: 0.1rem;
  overflow-y: auto;
  .card {
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1.5rem;
    box-shadow: 2px 2px 6px rgba(189, 189, 189, 0.7);
    p {
      line-height: 1.5;
    }
  }
  .title {
    margin-top: 1rem;
    text-align: center;
  }
  .desc {
    padding: 2rem;
  }
}
.bar-num {
  font-size: 3.6rem;
  font-weight: bold;
  color: rgba(239, 119, 35, 1);
  margin-left: 2rem;
  margin-right: 2rem;
}
.bar-old-num {
  font-size: 2rem;
  color: rgba(139, 139, 139, 1);
  text-decoration: line-through;
}
.van-action-bar-button--danger {
  width: 10.1rem !important;
}
.van-action-bar-button {
  flex: none;
  position: absolute;
  right: 1rem;
  width: 100px;
  height: 34px;
  border-radius: 5px;
  background: rgba(79, 172, 145, 1);
  padding: 5px;
}
.van-action-bar {
  // justify-content: space-between;
  box-shadow: -2px -1px 6px rgba(189, 189, 189, 0.7);
}
:deep .html-box {
  width: 100%;
  img {
    width: 100%;
  }
  p {
    line-height: 2
  }
}
</style>